<!--
 * @Author: wankong
 * @Date: 2021-10-07 15:54:03
 * @LastEditTime: 2021-10-29 09:41:53
-->
<template>
  <div class="login">
    <div class="bg"></div>
    <el-container>
      <el-main class="login-box">
        <h1>LOGIN</h1>
        <el-form :rules="loginRules" ref="loginref" :model="userinfo">
          <el-form-item prop="username">
            <el-input placeholder="请输入账号" v-model="userinfo.username" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="userinfo.password"
              show-password
              @keyup.native.enter="LoginSubmit"
            />
          </el-form-item>
          <el-form-item class="button-box">
            <el-button type="primary" @click="LoginSubmit">登录</el-button>
            <el-button @click="LoginReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    LoginSubmit() {
      this.$refs.loginref.validate(async (valid) => {
        if (!valid) return false;
        const res = await this.$http.post(
          this.adminPre + "/login",
          this.userinfo
        );
        if (res.code == 200) {
          this.$message.success("登录成功！");
          window.sessionStorage.setItem("Authorization", res.data);
          this.$router.push({
            path: "home/welcome",
          });
          return true;
        } else {
          return this.$message.error(res.msg);
        }
      });
    },
    LoginReset() {
      this.$refs.loginref.resetFields();
    },
  },
  created() {},
};
</script>


<style lang="less" scoped>
.bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #9796f0, #fbc7d4);
  z-index: -10;
  position: fixed;
  top: 0;
  left: 0;
}

.login-box {
  width: 400px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 10px;
  h1 {
    text-align: center;
    font-size: 30px;
    color: #9796f0;
    margin: 10px;
  }
}
</style>